<script setup lang="ts">
import { useCopy } from '@/composable/copy';
import { base64ToText, isValidBase64, textToBase64 } from '@/utils/base64';
import { withDefaultOnError } from '@/utils/defaults';
import { translate } from '@/plugins/i18n.plugin';

const encodeUrlSafe = useStorage('base64-string-converter--encode-url-safe', false);
const decodeUrlSafe = useStorage('base64-string-converter--decode-url-safe', false);

const textInput = ref('');
const base64Output = computed(() => textToBase64(textInput.value, { makeUrlSafe: encodeUrlSafe.value }));
const { copy: copyTextBase64 } = useCopy({ source: base64Output, text: translate('tools.base64-string-converter.copy.base64') });

const base64Input = ref('');
const textOutput = computed(() =>
  withDefaultOnError(() => base64ToText(base64Input.value.trim(), { makeUrlSafe: decodeUrlSafe.value }), ''),
);
const { copy: copyText } = useCopy({ source: textOutput, text: translate('tools.base64-string-converter.copy.string') });
const b64ValidationRules = [
  {
    message: translate('tools.base64-string-converter.invalid'),
    validator: (value: string) => isValidBase64(value.trim(), { makeUrlSafe: decodeUrlSafe.value }),
  },
];
const b64ValidationWatch = [decodeUrlSafe];
</script>

<template>
  <c-card :title="$t('tools.base64-string-converter.s2b.title')">
    <n-form-item :label="$t('tools.base64-string-converter.s2b.encodesf')" label-placement="left">
      <n-switch v-model:value="encodeUrlSafe" />
    </n-form-item>
    <c-input-text
      v-model:value="textInput"
      multiline
      :placeholder="$t('tools.base64-string-converter.s2b.placeholder')"
      rows="5"
      :label="$t('tools.base64-string-converter.s2b.s2e')"
      raw-text
      mb-5
    />

    <c-input-text
      :label="$t('tools.base64-string-converter.s2b.bos')"
      :value="base64Output"
      multiline
      readonly
      :placeholder="$t('tools.base64-string-converter.s2b.result')"
      rows="5"
      mb-5
    />

    <div flex justify-center>
      <c-button @click="copyTextBase64()">
        {{ $t('tools.base64-string-converter.s2b.copy') }}
      </c-button>
    </div>
  </c-card>

  <c-card :title="$t('tools.base64-string-converter.b2s.title')">
    <n-form-item :label="$t('tools.base64-string-converter.b2s.decodesf')" label-placement="left">
      <n-switch v-model:value="decodeUrlSafe" />
    </n-form-item>
    <c-input-text
      v-model:value="base64Input"
      multiline
      :placeholder="$t('tools.base64-string-converter.b2s.placeholder')"
      rows="5"
      :validation-rules="b64ValidationRules"
      :validation-watch="b64ValidationWatch"
      :label="$t('tools.base64-string-converter.b2s.bs2d')"
      mb-5
    />

    <c-input-text
      v-model:value="textOutput"
      :label="$t('tools.base64-string-converter.b2s.ds')"
      :placeholder="$t('tools.base64-string-converter.b2s.result')"
      multiline
      rows="5"
      readonly
      mb-5
    />

    <div flex justify-center>
      <c-button @click="copyText()">
        {{ $t('tools.base64-string-converter.b2s.copy') }}
      </c-button>
    </div>
  </c-card>
</template>
